<template>
  <footer class="page_footer">
    <el-row
      style="
      max-width: 1100px;
      margin: 0 auto;"
    >
      <!--左边版权内容-->
      <el-col :span="16">
        <div class="copy_right">
          <div class="page_text">
            <p>
              <i class="el-icon-hot-water"></i>
              页面总字数:{{ pageNum }} | Copyright © Daes |
              <a href="http://beian.miit.gov.cn" style="color: #808080"
                ><img
                  src="https://img.alicdn.com/tfs/TB1..50QpXXXXX7XpXXXXXXXXXX-40-40.png"
                  alt="http://beian.miit.gov.cn"
                />
                粤ICP备20059107号</a
              >
            </p>
            <p>当前时间: {{ timer }}</p>
          </div>
        </div>
      </el-col>
      <!--右边icon-->
      <el-col :span="8">
        <div class="copy_icon">
          <div class="cover-link">
            <el-row :gutter="20">
              <el-col :span="4">
                <div class="grid-content bg-purple">
                  <a href="https://space.bilibili.com/70433425/favlist">
                    <i
                      class="iconfont icon-wifi"
                      style="font-size:20px; color:#808080;"
                    ></i>
                  </a>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="grid-content bg-purple">
                  <a href="https://gitee.com/daes/vue_shop">
                    <i
                      class="iconfont icon-GitHub"
                      style="font-size:20px; color:#808080;"
                    ></i>
                  </a>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="grid-content bg-purple">
                  <a href="https://www.zhihu.com/people/shan-seng-26-89/posts">
                    <i
                      class="iconfont icon-zhihu"
                      style="font-size:20px; color:#808080;"
                    ></i>
                  </a>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="grid-content bg-purple">
                  <a
                    href="http://wpa.qq.com/msgrd?V=3&uin=810203055&Site=www.yudouyudou.com&Menu=yes"
                  >
                    <i
                      class="iconfont icon-QQ"
                      style="font-size:20px; color:#808080;"
                    ></i>
                  </a>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="grid-content bg-purple">
                  <a
                    href="http://mail.qq.com/cgi-bin/qm_share?t=qm_mailme&email=t9PW0sSFh4WH98bGmdTY2g"
                  >
                    <i
                      class="iconfont icon-youxiang"
                      style="font-size:20px; color:#808080;"
                    ></i>
                  </a>
                </div>
              </el-col>
            </el-row>
          </div>
        </div>
      </el-col>
    </el-row>
  </footer>
</template>

<script>
export default {
  data() {
    return {
      pageNum: '',
      // 当前时间
      timer: ''
    }
  },
  methods: {
    async fn() {
      var that = this
      setTimeout(
        await function() {
          var reg = /[\u4e00-\u9fa5]/g // 汉字的正则
          var inner = document.getElementById('__nuxt')
          var str = inner.innerHTML
          that.pageNum = str.match(reg).length
        },
        500
      )
    },
    // 调用时间
    dateNew() {
      setInterval(this.getDate, 500)
    },
    getDate() {
      var that = this
      var times = new Date()
      var yy = times.getFullYear()
      var mm = times.getMonth() + 1
      var dd = times.getDate()
      var hh = times.getHours()
      var ff = times.getMinutes() // 分钟
      var ss = times.getSeconds() // 秒
      if (ss < 10) {
        ss = '0' + ss
      }
      if (ff < 10) {
        ff = '0' + ff
      }
      that.timer =
        yy + '年' + mm + '月' + dd + '日' + ' ' + hh + ':' + ff + ':' + ss
    }
  },
  mounted() {
    this.fn()
    this.dateNew()
  },
  beforeDestroy() {
    if (this.getDate) {
      clearInterval(this.getDate) // 在Vue实例销毁前，清除时间定时器
    }
  }
}
</script>

<style lang="scss" scoped>
.page_footer {
  position: relative;
  width: 100%;
  min-height: 60px;
  padding-top: 20px;
  background-color: #fff;
  z-index: 99;
  box-shadow: 0px -10px 8px #f1f1f1;
  .copy_right {
    line-height: 24px;
    text-align: center;
    color: #808080;
    font-size: 14px;
    .page_text {
      img {
        padding-left: 5px;
        height: 16px;
      }
    }
  }
  .copy_icon {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 60px;
  }
  .cover-link {
    font-size: 12px;
    a {
      margin-left: 20px;
    }
  }
}
</style>
